<template>
  <div class="real-container">
    <div class="header">
      <van-nav-bar
        class="title"
        title="政务·城市内涝治理"
        style="width: 100%; height: 44px"
      />
      <!-- <div class="title">政务·城市内涝治理</div> -->

      <van-tabs v-model:active="active" @click-tab="changeTab">
        <van-tab
          :title="item.title"
          :name="item.title"
          v-for="(item, index) in state.tabs"
          :key="index"
        ></van-tab>
      </van-tabs>
    </div>

    <div class="content">
      <component :is="getComponent(state.active)" />
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted, watch, reactive } from "vue";
import alarmEvent from "./components/alarmEvent.vue";
import responesTask from "./components/responesTask.vue";
import disposeEvent from "./components/disposeEvent.vue";
import { getAlarmEventListApi } from "@/api/eventTask";
const router = useRouter();
const route = useRoute();
const state = reactive({
  tabs: [
    {
      title: "预警事件",
      type: "dispose",
      count: 12,
    },
    {
      title: "响应任务",
      type: "response",
      count: 10,
    },
    {
      title: "处置事件",
      type: "patrol",
      count: 15,
    },
  ],
  active: "",
  queryParams: {
    current: 1,
    size: 10,
    type: 2, // 1:点位预警，2：区域预警
    dataType: 1, //1:当前数据，2：历史数据
  },
});

const getComponent = (key) => {
  switch (key) {
    case "预警事件":
      return alarmEvent;
    case "响应任务":
      return responesTask;
    case "处置事件":
      return disposeEvent;
    default:
      return alarmEvent;
  }
};
const changeTab = (val) => {
  state.active = val.name;
};


//返回
// const onClickLeft = () => history.back();
</script>

<style lang="less" scoped>
.real-container {
  height: 100vh;
  background: rgba(243, 243, 243, 1);
  .header {
    height: 100px;
    background: #ffffff;
    text-align: center;
    // padding-top: 34px;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
      // margin-bottom: 20px;
      // border: 1px red solid;
    }
  }
  .content {
    height: calc(100% - 100px - 44px - 80px);
    padding: 12px;
  }
}
</style>
